import { bitRateFormatter, commonFormatter, toDecimalFormate2 } from '@/utils/common';

const dataZoom = [
	{
		height: 15,
		type: 'slider', //type的作用是指定数据缩放的类型，slider表示使用滑动条进行缩放，inside表示使用鼠标滚轮进行缩放。
		start: 0, //默认开始位置（百分比）
		end: 100 - 900 / 11, //默认结束位置（百分比）
		show: true,
		xAxisIndex: [0], //作用在x轴的下标（因为x轴可以有多个）
		showDataShadow: false,
		showDetail: false,
		realtime: true,
		filterMode: 'filter', //间滚动条的过滤模式,'filter'表示滑动时间条时会直接过滤掉不在时间范围内的数据，'weakFilter'表示滑动时间条时会逐渐过滤掉不在时间范围内的数据。
		bottom: '3%',
	},
];
const BARSERIESCOLOR = {
	type: 'liner',
	x: 0,
	y: 1,
	x2: 0,
	y2: 0,
	colorStops: [
		{
			offset: 0,
			color: '#06F4F4',
		},
		{
			offset: 1,
			color: '#1dc69d',
		},
	],
	global: false, // 缺省为 false
};
const SYMBOLSIZE = 7; // 折线图节点大小
const SERIESLABEL = {
	label: {
		show: false,
		position: 'center',
		formatter: '{c}次',
		// color: '#FFFFFF',
		// fontSize: 20,
	},
	emphasis: {
		label: {
			show: true,
			fontSize: 30,
			fontWeight: 'bold',
			color: '#fff',
		},
	},
};
const TITLE = {
	text: '',
	left: 'center',
	top: 'bottom',
	textStyle: {
		//文字颜色
		color: '#FFFFFF',
		//字体风格,'normal','italic','oblique'
		fontStyle: 'normal',
		//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
		fontWeight: 500,
		//字体系列
		fontFamily: 'sans-serif',
		//字体大小
		fontSize: 16,
	},
};
const GRID = {
	left: '2%',
	right: '3%',
	top: '3%',
	bottom: '7%',
	containLabel: true,
};

const LEGEND = {
	top: 'bottom',
	left: 'center',
	textStyle: {
		color: '#fff',
	},
};

const NAMETEXTSTYLE = {
	color: '#aaa',
	nameLocation: 'start',
	padding: [8, 0, 0, 10],
};

// 格式化tooltip内容
function formatterToolTipFn(params: any, unit: string, isSecend?: boolean, isNull?: boolean) {
	let html = '<div>' + params[0].name + '</div>';
	if (isNull) {
		for (let i = 0; i < params.length; i++) {
			const color = params[i].color;
			const name = params[i].seriesName;
			const value = params[i].value;
			const type = params[i].seriesType;
			html += `<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:
		 	${color};"></span>
		 	${name}: ${value} ${unit}</div>`;
		}
		return html;
	}

	if (isSecend) {
		let html = '';
		const timeArr: string[] = ['平均响应耗时', '建连耗时'];
		for (let i = 0; i < params.length; i++) {
			const name = params[i].seriesName;
			const value = params[i].value;
			const color = params[i].color;
			if (timeArr.includes(name)) {
				html += `<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:
		${color};"></span>
		${name}: ${toDecimalFormate2(value, 'wm')}</div>`;
			} else {
				html += `<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:
		${color};"></span>
		${name}: ${commonFormatter(value, unit)}</div>`;
			}
		}
		return html;
	} else {
		for (let i = 0; i < params.length; i++) {
			const color = params[i].color;
			const name = params[i].seriesName;
			const value = params[i].value;
			const type = params[i].seriesType;
			if (unit === 'wm') {
				html += `<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:
			${color};"></span>
			${name}: ${toDecimalFormate2(value, unit)}</div>`;
			} else {
				html += `<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:
		 	${color};"></span>
		 	${name}: ${commonFormatter(value, unit)}</div>`;
			}
		}
		return html;
	}
}

export { dataZoom, BARSERIESCOLOR, SYMBOLSIZE, SERIESLABEL, TITLE, GRID, LEGEND, NAMETEXTSTYLE, formatterToolTipFn };
